<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <div class="search-container">
          <search-form @search-submit="getThreadList">
            <search-input v-model="listQuery.id" placeholder="帖子编码" />
            <search-input v-model="listQuery.title" placeholder="标题" />
            <search-input v-model="listQuery.memberName" placeholder="作者姓名" />
          </search-form>
        </div>
      </el-row>
    </div>

    <el-table
      :ref="multiple? 'multipleTable' : 'singleTable'"
      v-loading="listLoading"
      :data="list"
      border
      fit
      stripe
      highlight-current-row
      @current-change="handleCurrentChange"
      @select="handleSelect"
    >
      <el-table-column
        v-if="multiple"
        type="selection"
        width="55"
      />

      <el-table-column align="center" label="ID" prop="id" width="100" />

      <el-table-column align="center" label="作者" prop="memberName" />

      <el-table-column align="center" label="标题" prop="title" />

      <el-table-column align="center" label="是否绑定" prop="isBound">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isBound? 'success' : 'danger'">{{ scope.row.isBound ? '已绑定' : '未绑定' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        v-if="!multiple"
        align="center"
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button v-if="scope.row.isBound" type="danger" size="mini" title="解绑" @click="handleDelete(scope.row)">解绑</el-button>
            <el-button v-else type="primary" size="mini" title="选择" @click="handleCurrentChange(scope.row)">选择</el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getThreadList"
    />

    <div class="footer">
      <el-button @click="$emit('click-close')">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SearchForm from '@/components/SearchForm'
import SearchInput from '@/components/SearchForm/SearchInput'
import { searchThreadList } from '@/api/rest/post'

const initForm = {
  selectedList: null
}

export default {
  name: 'InThreadList',
  components: { SearchInput, Pagination, SearchForm },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    selectedList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: null,
        memberName: null,
        title: null,
        page: 1,
        limit: 10
      },
      selectedIdList: null,
      currentSelected: null,
      selectedRowList: {},
      editForm: { ...initForm }
    }
  },
  computed: {},
  watch: {
    selectedList(val) {
      this.initSelectedList()
      this.getThreadList()
    },
    list() {
      if (this.multiple) {
        this.$nextTick(_ => {
          let isSelectedRowListInit = false
          if (this.selectedRowList && this.listQuery.page in this.selectedRowList && this.selectedRowList[this.listQuery.page]) {
            this.selectedRowList[this.listQuery.page] = []
            isSelectedRowListInit = true
          }
          this.list.forEach(item => {
            if (this.selectedIdList.indexOf(item.id) >= 0) {
              this.$refs.multipleTable.toggleRowSelection(item)
              if (isSelectedRowListInit) {
                this.selectedRowList[this.listQuery.page].push(item)
              }
            }
          })
        })
      }
    }
  },
  created() {
    this.initSelectedList()
    this.getThreadList()
  },
  methods: {
    initSelectedList() {
      this.selectedIdList = []
      this.selectedList.forEach(item => {
        this.selectedIdList.push(item.id)
      })
    },
    getThreadList() {
      this.listLoading = true
      searchThreadList(this.listQuery).then(response => {
        this.list = []
        response.data.items.forEach(item => {
          this.list.push(Object.assign(item, { isBound: this.selectedIdList.indexOf(item.id) >= 0 }))
        })
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleDelete(row) {
      this.$emit('cancel', row.id)
    },
    handleSubmit() {
      if (this.multiple) {
        this.editForm.selectedList = this.selectedIdList
      }

      if (this.editForm.selectedList < 1) {
        this.$alert('请选择帖子')
        return false
      }

      this.$emit('selected-list', this.editForm.selectedList)
    },
    setCurrent(row) {
      if (!this.multiple) {
        if (this.$refs.singleTable !== null) {
          this.$refs.singleTable.setCurrentRow(row)
        }
      }
    },
    handleCurrentChange(row) {
      if (this.multiple) {
        this.setCurrent(row)
        this.editForm.selectedList = [row]
      } else {
        this.$emit('selected', row)
      }
    },
    handleSelect(selection, row) {
      const index = this.selectedIdList.findIndex(item => item === row.id)
      if (index >= 0) {
        this.selectedIdList.splice(index, 1)
      } else {
        this.selectedIdList.push(row.id)
      }
    }
  }
}
</script>
<style scoped>
.footer {
  display: flex;
  justify-content: flex-end;
}
.edit-form {
  margin-top: 20px;
}
>>> .el-table__body tr.current-row > td {
  background-color: #e6fcda !important;
}
>>> .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
  background-color: #e6fcda !important;
}
</style>

